<template>
    <div>
        <div class="filter-tab">
            <span v-for="(item, index) in filterTab"
                  :key="index"
                  :class="{selected: activeIndex === index || (item.isPullDown && item.pullDownActive)}"
                  @click="handleFilterTab(index)">
            {{ item.content }}
            <i class="iconfont icon-triangledown-fill"
               :class="{'icon-triangleup-fill': item.activeTriangle }"
               v-if="item.isPullDown"></i>
            </span>
        </div>
        <div class="vux-1px-b"></div>
    </div>
</template>

<script>
    /**
     * Created by c.y on 2018/3/16.
     * 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
     * 贷款的筛选tab
     * 如果要使用这个组件，需要传递如下数组值
     *  * filterTab: [
     {
         isPullDown: true, // 是否有下拉选项（即三角形）
         content: '筛选条件1',
         pullDownActive: false, // 这个筛选条件是可以携带的，及点击一次就选中，后面一直选中,
         activeTriangle: false // 下拉筛选三角形显示问题，列表展开三角形向上，收起三角形向下
     },
     {
         isPullDown: false,
         content: '筛选条件2',
         pullDownActive: false
     },
     {
         isPullDown: false,
         content: '筛选条件3',
         pullDownActive: false
     }
     ]
     *
     */
    export default {
        name: 'filter-tab',
        data () {
            return {
                activeIndex: -1, // 初始化时候，都没选中
            }
        },
        methods: {
            // 点击筛选tab
            handleFilterTab (index) {
                this.activeIndex = index;
                // 把当前点击的元素，传递给父组件
                this.$emit('on-click-tab', this.filterTab[index], index);
            }
        },
        props: {
            filterTab: {
                type: Array,
                required: true
            }
        },
        deactivated(){
            this.activeIndex = -1;
        }
    }
</script>

<style lang="less">
    @import "../../style/mixin";

    .filter-tab {
        position: relative;
        width: 100%;
        height: 32px;
        font-size: @font-size-small;
        line-height: 32px;
        color: @color-text-primary;
        .flexLayout();
        background: @color-white;
        span {
            flex: 1;
            text-align: center;
        }
        .selected {
            color: @color-primary;
        }
        .iconfont {
            font-size: @font-size-tiny;
        }
    }
</style>
